<template>
  <div class="rootBox">
    <div class="cardbox searchtools">
      <el-form ref="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商品类型">
              <el-select
                v-model="listQuery.categoryId"
                placeholder="请选择商品类型"
                class="formItem"
              >
                <el-option
                  v-for="(item, index) in productTypesList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品状态">
              <el-select
                v-model="listQuery.approvalStatus"
                placeholder="请选择商品状态"
                class="formItem"
              >
                <el-option
                  v-for="(item, index) in productStatusList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align: right">
            <el-button
              type="primary"
              style="margin-right: 15px"
              @click="searchHandle"
            >
              查询
            </el-button>

            <el-button @click="resetHandle"> 重置 </el-button>
          </el-col>
        </el-row>
      </el-form>

      <div class="cardbox">
        <div class="button-action">
          <el-button
            type="success"
            @click="exportExcel"
            style="margin-right: 20px"
            >下载Excel</el-button
          >
          <el-button @click="exportZIP">下载ZIP</el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="datalist"
          border
          id="tableData"
          style="width: 100%"
        >
          <el-table-column align="left" label="商品名称" width="500">
            <template slot-scope="{ row }">
              <div>{{ row.serverName}}
                <span style="color:red">{{row.price +  "¥"}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品分类">
            <template slot-scope="{ row }">
              <span>{{
                row.categoryId == 16
                  ? "代理记账"
                  : row.categoryId == "8"
                  ? "工商biang"
                  : "其他"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="销量" prop="sales" />
          <el-table-column align="center" prop="approvalStatus" label="状态" />
          <el-table-column align="center" prop="updateTime" label="更新时间" />
          <el-table-column align="center" label="操作" width="120">
            <template slot-scope="{ row }">
              <router-link :to="'/product/edit/' + row.id">
                <el-button type="primary" size="small" icon="el-icon-edit">
                  编辑
                </el-button>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-page" style="margin: 20px 0; text-align: right">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import serviceApi from "../../../src/APIService/api/backstage/service";
import { optionItem, productData } from "@/types/index";
import Pagination from "@/components/Pagination/index.vue";
import informationApi from "../../../src/APIService/api/backstage/information";
import { formatJson } from '@/utils'
import FileSaver from "file-saver";
import { exportTxt2Zip } from '@/utils/zip'

import XLSX from "xlsx";

@Component({
  name: "product",
  components: {
    Pagination,
  },
})
export default class extends Vue {
  listLoading: boolean = false;
  private datalist: productData[] = [];
    private filename:string = ''
  private total: number = 0;
  private listQuery = {
    categoryId: "",
    approvalStatus: "",
    currentPage: 1,
    pageSize: 10,
  };
  private productTypesList: optionItem[] = [
    {
      value: 16,
      label: "代理记账",
    },
    {
      value: 8,
      label: "工商变更",
    },
  ];
  private productStatusList: optionItem[] = [
    {
      value: "AWAIT",
      label: "待审核",
    },
    {
      value: "PASS",
      label: "已上架",
    },
    {
      value: "REFUSE",
      label: "已拒接",
    },
    {
      value: "REFUSE",
      label: "已拒接",
    },
  ];

  private mounted() {
    this.getInfo();
  }

  // 下载到excel
  private exportExcel() {
    console.log("excel");
    var wb = XLSX.utils.book_new();
    var tableData = XLSX.utils.table_to_sheet(
      document.querySelector("#tableData")
    );
    XLSX.utils.book_append_sheet(wb, tableData, "商品管理统计表.xlsx");
    var wbot = XLSX.write(wb, {
      bookType: "xlsx",
      bookSST: true,
      type: "array",
    });
    try {
      FileSaver.saveAs(
        new Blob([wbot], { type: "application/octet-stream;charset=utf-8" }),
        "商品管理统计表.xlsx"
      );
    } catch (e) {
      if (typeof console !== "undefined") console.log(e, wbot);
    }
    return wbot;
  }

  private searchHandle() {
    this.listQuery.currentPage = 1;
    this.listQuery.pageSize = 10;
    this.getInfo();
  }

  private resetHandle() {
    this.listQuery = {
      categoryId: "",
      approvalStatus: "",
      currentPage: 1,
      pageSize: 10,
    };

    this.getInfo();
  }

  private async getInfo() {
    let res = await serviceApi.getServiceData(this.listQuery);
    if (res.code === 20000) {
      this.datalist = res.data.servers;
      this.total = res.data.total;
    } else {
      this.$message(res.msg);
    }
  }

  private getList(payload) {
    console.log(payload);

    this.listQuery.pageSize = payload.limit;
    this.listQuery.currentPage = payload.page;
    this.getInfo();
  }
  // 下载zip
  private async exportZIP() {
    // let checkboxIds = [76, 75];
    // let res = await informationApi.download({ ids: checkboxIds });
   
    // // // 文件流
    // let blob = new Blob([res.data], { type: "application/zip" });
    // const filename = '文件Zip.zip'
    // const link = document.createElement("a"); // 创建a标签
    // let url = window.URL.createObjectURL(blob);
    // link.download = filename

    // link.href = url;

    // link.click();
    // URL.revokeObjectURL(url); // 释放内存

     const tHeader = ['商品名称', '商品分类', '销量', '状态', '更新时间']
    const filterVal = ['serverName', 'categoryId', 'sales', 'status', 'updateTime']
    const list = this.datalist
    const data = formatJson(filterVal, list)
    if (this.filename !== '') {
      exportTxt2Zip(tHeader, data, this.filename, this.filename)
    } else {
      exportTxt2Zip(tHeader, data)
    }
    
  }
  
}
</script>
<style lang="less" scoped>
.formItem {
  width: 100%;
}
.button-action {
  margin: 20px 0;
}
</style>